import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from 'store'
import { createWebHistory, createRouter } from 'vue-router'

import base from '@/config/base.config'
// // eslint-disable-next-line import/no-unresolved
// import MArticle from '@/mviews/MArticle'
// // eslint-disable-next-line import/no-unresolved
// import MArticleList from '@/mviews/MArticleList'
// // eslint-disable-next-line import/no-unresolved
// import MColumns from '@/mviews/MColumns'
// // eslint-disable-next-line import/no-unresolved
// import MHome from '@/mviews/MHome'
// // eslint-disable-next-line import/no-unresolved
// import MUser from '@/mviews/MUser'
// // eslint-disable-next-line import/no-unresolved
import Article from '@/views/Article.vue'
import ArticleList from '@/views/ArticleList.vue'
import Column from '@/views/Column.vue'
import Editor from '@/views/Editor.vue'
import Home from '@/views/Home.vue'
import Socket from '@/views/Socket.vue'
import UserInfo from '@/views/UserInfo.vue'

// // eslint-disable-next-line import/no-unresolved

// eslint-disable-next-line import/no-unresolved
// // eslint-disable-next-line import/no-unresolved
// // eslint-disable-next-line import/no-unresolved

const { TOKEN_NAME } = base
// 将涡轮加载项关闭
NProgress.configure({ showSpinner: false })
// 改写push方法, 将push的报错进行捕获
// const originPush = VueRouter.prototype.push
// VueRouter.prototype.push = function (local) {
//   return originPush.call(this, local).catch((err) => err)
// }
// const originReplace = VueRouter.prototype.replace
// VueRouter.prototype.replace = function (local) {
//   return originReplace.call(this, local).catch((err) => err)
// }

/*
  router嵌套关系, 通过router嵌套可以是router-view的嵌套, 而路径不用嵌套
*/
export const routes = [
  {
    path: '/',
    name: 'home',
    // 重定向到index, 文章列表中, 作为主页
    redirect: '/index',
    component: Home,
    children: [
      {
        name: 'index',
        path: '/index',
        component: ArticleList,
      },
      {
        name: 'article',
        path: '/article/:id',
        component: Article,
      },
      {
        name: 'column',
        path: '/column',
        component: Column,
        meta: {
          requireAuth: true,
        },
      },
      {
        name: 'write',
        path: '/write',
        component: Editor,
        props(to) {
          return {
            columnId: to.query.columnId,
          }
        },
      },
      {
        name: 'userInfo',
        path: '/userInfo',
        component: UserInfo,
      },
      {
        name: 'socket',
        path: '/socket',
        component: Socket,
      },
    ],

    //

    //       {
    //         name: 'socket',
    //         path: '/socket',
    //         component: Socket,
    //       },
    //     ],
    //   },
    //   // 设置移动端, 需要配置新的顶层路由
    //   {
    //     path: '/m',
    //     name: 'mHome',
    //     redirect: '/m/articles',
    //     component: MHome,
    //     children: [
    //       {
    //         // 这里表示/m/articles
    //         path: 'articles',
    //         name: 'mArticleLIst',
    //         component: MArticleList,
    //         meta: {
    //           headType: 'MSearchbar',
    //         },
    //       },
    //       {
    //         // 这里表示/m/articles
    //         path: 'article/:id',
    //         name: 'mArticle',
    //         component: MArticle,
    //         meta: {
    //           headType: 'MNavbar',
    //           title: '文章',
    //           button: '评论',
    //           buttonEventHandle: 'showActionSheet',
    //           type: 'login',
    //         },
    //         props: true,
    //       },
    //       {
    //         // 这里表示/m/column
    //         path: 'columns',
    //         name: 'mColumns',
    //         component: MColumns,
    //         meta: {
    //           headType: 'MNavbar',
    //           title: '分类',
    //         },
    //       },
    //       {
    //         // 这里表示/m/column
    //         path: 'user',
    //         name: 'mUser',
    //         component: MUser,
    //         meta: {
    //           headType: 'MNavbar',
    //           title: '我的',
    //         },
    //         props(route) {
    //           return { ...route.query }
    //         },
    //       },
    //     ],
  },
]
export const router = createRouter({
  history: createWebHistory(),
  routes,
})

/*
  设置全局守卫, 有些前端路由, 需要验证是否登录的
  1. 在meta上添加 reuqireAuth条件
  2. 在全局守卫中拦截路由信息, 验证token是否存在
  3. 如果存在, 就next, 如果不存在, 暴露错误信息

*/
router.beforeEach((to, from, next) => {
  NProgress.start()
  if ((to.meta.requireAuth && !store.get(TOKEN_NAME)) || store.get(TOKEN_NAME) === 'undefined') {
    Vue.prototype.$notify({
      title: '警告',
      message: '用户未登录',
      type: 'warning',
    })
    NProgress.done()
    // 从index 跳过来, 然后又返回index, 出现重定向问题 让他跳过来, 然后再调到index那边
    next({ name: 'index' })
    return
  }
  next()
})
router.afterEach(() => {
  NProgress.done()
})
